<template>
  <header>
    <div class="user">
      <template v-if="authenticated">
        <a-dropdown class="user-dropdown">
          <a href="#">
            {{user.username}}
            <a-icon type="down"/>
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="openManage" class="font-size-14">后台管理</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="logout" class="font-size-14">退出登录</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
      <template v-else>
        <a-button @click="handleRoute({key:'/login'})">Login</a-button>
      </template>
    </div>

    <div class="logo">Maki</div>
    <a-menu
      theme="light"
      mode="horizontal"
      :defaultSelectedKeys="['2']"
      @click="handleRoute"
      class="menu">
      <a-menu-item key="/">首页</a-menu-item>
      <a-menu-item key="/list">列表</a-menu-item>
      <a-menu-item key="/about">关于</a-menu-item>
    </a-menu>

  </header>
</template>

<script>
  import api from '../api'
  import {mapGetters, mapActions} from 'vuex'

  export default {
    data () {
      return {
        current: ['mail'],
      }
    },
    mounted () {
      this.getProfile()
    },
    methods: {
      ...mapActions(['getProfile']),
      handleRoute ({key}) {
        if (key && key !== this.activeMenu) {
          this.$router.push(key)
        }
      },
      openManage () {
        window.open("/manage/")
      },
      logout () {
        api.logout().then(() => {
          this.$store.commit('clearUser')
          this.$message.success("logout ~")
          this.handleRoute({key: '/login'})
        })
      }
    },
    computed: {
      ...mapGetters(['authenticated']),
      activeMenu () {
        return '/' + this.$route.path.split('/')[1]
      },
      user () {
        return this.$store.state.user
      }
    }
  }

</script>

<style scoped lang="less">
  header {
    height: 64px;
    border-bottom: 1px solid #e1e4e8;
    line-height: 64px;
    position: relative;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 7px;
    .menu {
      line-height: 64px;
    }
    .user {
      float: right;
      margin-right: 10px;
      .user-dropdown {
        float: right;
        margin-right: 20px;
        color: black;
      }
    }
  }

  .logo {
    line-height: 64px;
    color: #1DA57A;
    font-weight: bold;
    font-size: 20px;
    margin: 0 24px;
    float: left;
  }
</style>
